<template>
	<div>
		
		<!-- 左侧导航 -->
		<el-container>
			<el-aside class="div_left" width="1rem"> 
			<span>个人中心 </span>
			<ul>
				<li class="left_li1" :class="{left_li2:flag[0].style}" @click="check(0)"> 最新消息 </li>
				<li class="left_li1" :class="{left_li2:flag[1].style}" @click="check(1)"> 我的分享 </li>
				<li class="left_li1" :class="{left_li2:flag[2].style}" @click="check(2)"> 我的作品 </li>
				<li class="left_li1" :class="{left_li2:flag[3].style}" @click="check(3)"> 个人信息 </li>
				<li class="left_li1" :class="{left_li2:flag[4].style}" @click="check(4)"> 修改密码 </li>
				<li class="left_li1" :class="{left_li2:flag[5].style}" @click="check(5)"> 我的邀请 </li>
				<li class="left_li1" :class="{left_li2:flag[6].style}" @click="check(6)"> 留言板 </li>
			</ul>
		
			</el-aside>
			
			<el-main class="el_main">
				<router-view></router-view>
			</el-main>
			
		</el-container>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				flag:[
					{style:true,theUrl:"/BLMtop/BLMGoldLeft/BLMGoldNews"},
					{style:false,theUrl:"/BLMtop/BLMGoldLeft/BLMMyShare"},
					{style:false,theUrl:"/BLMtop/BLMGoldLeft/BLMMyWorks"},
					{style:false,theUrl:"/BLMtop/BLMGoldLeft/BLMMyself"},
					{style:false,theUrl:"/BLMtop/BLMGoldLeft/BLMChangePsw"},
					{style:false,theUrl:"/BLMtop/BLMGoldLeft/BLMMyInvitation"},
					{style:false,theUrl:"/BLMtop/BLMGoldLeft/BLMLeavingMsg"},
				]
			}
		},methods:{
			check(index) {
				for (let i = 0; i < this.flag.length; i++) {
					this.flag[i].style = false;
			
					if (index === i) {
						this.flag[i].style = true;
						this.$router.push(this.flag[i].theUrl);
					}
				};
			
			}
		},mounted() {
			this.$router.push("/BLMtop/BLMGoldLeft/BLMGoldNews")
		}
	}
</script>

<style>
	/* 左侧 */
	.div_left{
		height: 2.6rem;
		width: 100%;
		overflow: hidden;
		background: url(./img_gold/left.png);
		background-size: 100% 100%;
		padding-top: 0.25rem;
		padding-left: 0.13rem;
		font-size: 0.0875rem;
		color: white;
		margin-top: 0.28125rem;
	}
	
	.div_left ul{
		list-style-type: none;
		padding: 0;
	}
	
	.left_li1{
		background: url(./img_gold/left-list.png);
		background-size: 100% 100%;
		width: 0.75rem;
		height: 0.21875rem;
		line-height: 0.1875rem;
		text-align: center;
		margin-bottom: 0.0625rem;
		font-size: 0.075rem;
		cursor: pointer;
	}
	
	.left_li2{
		background: url(./img_gold/left-list-xz.png);
		background-size: 100% 100%;
		color: #333;
	}
	
	.el_main{
		padding-top: 0;
		overflow: hidden;
	}
</style>
